<!-- eslint-disable vue/require-v-for-key -->
<template>
	<div class="shortcut-key-input" :class="{ cursor: focus }" :style="$props.style" tabindex="0" @focus="handleFocus" @blur="focus = false">
		<template v-if="list.length">
			<div>
				<template v-for="(item, index) in showList">
					// eslint-disable-next-line vue/require-v-for-key
					<span class="item-key">{{ item }}</span>
					<span class="item-key" v-if="index !== showList.length - 1">+</span>
				</template>
				<Icon type="ios-close" size="30" @click="handleDeleteKey"></Icon>
			</div>
		</template>
		<div v-else class="placeholder">{{ placeholder }}</div>
	</div>
</template>

<script>
const CODE_NUMBER = Array.from({ length: 10 }, (v, k) => `Digit${k + 1}`)
const CODE_NUMPAD = Array.from({ length: 10 }, (v, k) => `Numpad${k + 1}`)
const CODE_ABC = Array.from({ length: 26 }, (v, k) => `Key${String.fromCharCode(k + 65).toUpperCase()}`)
const CODE_FN = Array.from({ length: 12 }, (v, k) => `F${k + 1}`)
// const CODE_CONTROL = ['Shift', 'ShiftLeft', 'ShiftRight', 'Control', 'ControlLeft', 'ControlRight', 'Alt', 'AltLeft', 'AltRight'] // ShiftKey Control(Ctrl) Alt

export default {
	name: 'HotKeyInput',
	props: {
		// 默认绑定值
		// 传入 ['Ctrl+d'] 格式时会自动处理成 [{ text: 'Ctrl+d', controlKey: { altKey: false, ctrlKey: true, shiftKey: false, key: 'd', code: 'KeyD } }]
		hotkey: {
			type: Array,
			required: true
		},
		// 校验函数 判断是否允许显示快捷键
		verify: {
			type: Function,
			default: () => true
		},
		// 无绑定时提示文字
		placeholder: {
			type: String,
			default: ''
		},
		// 限制最大数量
		max: {
			type: [String, Number],
			default: 1
		},
		// 快捷键使用范围
		range: {
			type: Array,
			default: () => ['NUMBER', 'NUMPAD', 'ABC', 'FN']
		}
	},
	data() {
		return {
			focus: false,
			list: this.hotkey,
			keyRange: []
		}
	},
	watch: {
		list: function (list) {
			if (list.length) this.focus = false
		},
		hotkey: {
			handler: function (val, oldVal) {
				if (val !== oldVal) {
					// Only update list if hotkey value changes
					if (!val.length) return
					const list = []
					const varlist = [...val]
					console.log(varlist)
					varlist.forEach((item) => {
						const arr = item.split('+')
						const controlKey = {
							altKey: arr.includes('Alt'),
							ctrlKey: arr.includes('Ctrl'),
							shiftKey: arr.includes('Shift'),
							key: arr[arr.length - 1],
							code: `Key${arr[arr.length - 1].toUpperCase()}`
						}
						list.push({
							text: arr.reduce((text, item, i) => {
								if (i) text += '+'
								if (controlKey.key === item) text += item.toUpperCase()
								else text += item
								return text
							}, ''),
							controlKey
						})
					})
					this.list = list
				}
			},
			immediate: true
		},
		range: {
			handler: function (val) {
				const keyRangeList = {
					NUMBER: CODE_NUMBER,
					NUMPAD: CODE_NUMPAD,
					ABC: CODE_ABC,
					FN: CODE_FN
				}
				val.forEach((item) => {
					this.keyRange = this.keyRange.concat(keyRangeList[item.toUpperCase()])
				})
			},
			immediate: true
		}
	},
	computed: {
		showList() {
			let data = []
			this.list.forEach((item) => {
				item.text.split('+').forEach((tx) => {
					data.push(tx)
				})
			})
			return data
		}
	},
	methods: {
		handleFocus() {
			if (!this.list.length) this.focus = true
		},
		handleDeleteKey(index) {
			this.list.splice(index, 1)
			console.log(this.list)
			this.$emit(
				'update:hotkey',
				this.list.map((item) => {
					return item.text
				})
			)
			this.focus = true
		},
		setHotKeys(keys) {
			console.log(keys)
			if (this.focus) {
				const list = keys.split('+')
				this.addHotkey({
					text: keys,
					controlKey: {
						altKey: list.includes('Alt'),
						ctrlKey: list.includes('Ctrl'),
						shiftKey: list.includes('Shift'),
						key: list[list.length - 1],
						code: `Key${list[list.length - 1].toUpperCase()}`
					}
				})
			}
		},
		// handleKeydown(e) {
		// 	const { altKey, ctrlKey, shiftKey, key, code } = e
		// 	if (!CODE_CONTROL.includes(key)) {
		// 		if (!this.keyRange.includes(code)) return
		// 		let controlKey = ''
		// 		;[
		// 			{ key: altKey, text: 'Alt' },
		// 			{ key: ctrlKey, text: 'Ctrl' },
		// 			{ key: shiftKey, text: 'Shift' }
		// 		].forEach((curKey) => {
		// 			if (curKey.key) {
		// 				if (controlKey) controlKey += '+'
		// 				controlKey += curKey.text
		// 			}
		// 		})
		// 		if (key) {
		// 			if (controlKey) controlKey += '+'
		// 			controlKey += key.toUpperCase()
		// 		}
		// 		this.addHotkey({
		// 			text: controlKey,
		// 			controlKey: { altKey, ctrlKey, shiftKey, key, code }
		// 		})
		// 	}
		// 	e.preventDefault()
		// },
		addHotkey(data) {
			if (this.list.length && this.list.some((item) => data.text === item.text)) return
			if (this.list.length && this.list.length.toString() === this.max.toString()) return
			this.list.push(data)
			this.$emit(
				'update:hotkey',
				this.list.map((item) => {
					return item.text
				})
			)
		}
	},
	mounted() {
		window.setHotKeys = this.setHotKeys
	}
}
</script>

<style scoped>
@keyframes Blink {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.shortcut-key-input {
	position: relative;
	/* border: 1px solid #dcdcdc;
	border-radius: 4px; */
	background-color: var(--bg-color);
	color: var(--header-close-color);
	width: 100%;
	height: 8.9rem;
	/* padding: 2px 0; */
	cursor: text;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* .shortcut-key-input:focus {
	border-color: #188cff;
	box-shadow: 0 0 4px rgba(24, 140, 255, 0.38);
} */

.shortcut-key-input.cursor::after {
	content: '|';
	animation: Blink 1.2s ease 0s infinite;
	font-size: 1.25rem;
	position: absolute;
	top: 2px;
	left: 12px;
}

.shortcut-key-input div {
	color: var(--header-close-color);
	padding: 0 22px 0 8px;
	height: 64px;
	font-size: 1.25rem;
	line-height: 64px;
	border-radius: 4px;
	margin: 5px;
	.item-key {
		margin-right: 5px;
	}
}

.shortcut-key-input .placeholder {
	color: var(--header-close-color);
	font-size: 13px;
	text-indent: 4px;
	font: 400 13.3333px Arial;
}

.shortcut-key-input div i {
	position: absolute;
	top: 26px;
	right: 24px;

	width: 18px;
	height: 18px;
	transform: scale(0.9);
	opacity: 0.6;
}

.shortcut-key-input div i:hover {
	cursor: pointer;
	opacity: 1;
}
</style>
